<template>
  <div id="world">
    <cesium-map @loadComplete="loadComplete"></cesium-map>
    <div id="app" v-if="isLoad">
      <router-view />
    </div>
  </div>
</template>

<script>
import cesiumMap from '@/components/cesiumMap';
export default {
  name: "app",

  components: { cesiumMap },

  data() {
    return {
      isLoad: false
    };
  },

  methods: {
    loadComplete() {
      this.isLoad = true;
      this.$nextTick(() => {
        this.setScreen();
      });
    },

    setScreen() {
      // 计算分辨率差来修改maximumScreenSpaceError
      $("#app").css("width", window.basicWidth);
      $("#app").css("height", window.basicHeight);
      if (window.turnOnZoom) {
        let num = $(window).width() / window.basicWidth;
        let scaleY = $(window).height() / window.basicHeight;
        $("#app").css({
          transform: "scale(" + num + "," + scaleY + ")",
          transformOrigin: "left top",
          backgroundSize: "100%",
        });
        window.scale = 1;
        document
          .getElementById("app")
          .style.setProperty("--scale", num);
        let style = {
          transform: "scale(" + num + "," + scaleY + ") !important",
          "transform-origin": "left top",
        };
        window.scale = {
          x: num,
          y: scaleY,
        };
        console.log(`横轴的缩放比例${num},纵轴的缩放比例${scaleY}`);
        this.styleCompatibility(style);
      } else {
        document.getElementById("app").style.setProperty("--scale", 1);
      }
    },

    styleCompatibility(styleObj) {
      let styleNode = document.createElement("style");
      let styleStr = "";
      styleNode.setAttribute("type", "text/css");
      for (let i in styleObj) {
        styleStr += `${i}:${styleObj[i]};`;
      }
      console.log(styleStr);
      // cesium内弹窗样式缩放
      styleNode.innerHTML = `
              .cesium-map,poi-div{
                overflow:hidden;
              }
              .point-box, .card-popup, .county-box
            `;
      let headNode = document.querySelector("head");
      headNode.appendChild(styleNode);
    }
  },

  mounted() {
  }
};
</script>

<style lang="less" scoped>
#world,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#world {
  position: relative;

  #app {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    pointer-events: none;
  }
}
</style>